<template>
  <view class="safearea-bb view-content">
    <block>
      <up-tabs :list="typeList" :current="type" :activeStyle="{
          color: '#27ab9c',
          fontWeight: 'bold',
        }" :inactiveStyle="{
          color: '#606266',
        }" lineHeight="10rpx" lineColor="#27ab9c" itemStyle=" width: 50%;padding-left: 0; padding-right: 0;   font-size: 30rpx;height:45px" @click="changeTab"></up-tabs>
      <view class="title">选择套餐</view>
      <view class="package-list">
        <swiper class="swiper" :current="type" @change="changeSwiper" :style="{ height: 'auto',height: swiperHei + 'rpx' }">
          <swiper-item>
            <view class="swiper-item1">
              <view v-for="item in packageList1" :key="item.id" class="package-item" @click="selectPackage = item.id">
                <image v-if="item.id == selectPackage" class="circle" mode="scaleToFill" src="@/static/images/ic_choose_s.png"></image>
                <image v-else class="circle" mode="scaleToFill" src="@/static/images/ic_choose_n.png"></image>
                <view class="ri-box">
                  <view style="
                      flex-direction: column;
                      align-items: flex-start;
                      justify-content: center;
                    ">
                    <view style="display: flex; align-items: center; margin-bottom: 18rpx">
                      <view class="name">{{ item.name }}</view>
                      <view class="remaining-time" style="margin-left: 20rpx">
                        约{{ item.time }}分钟
                      </view>
                    </view>
                    <view class="content">{{ item.content }}</view>
                  </view>
                  <view class="payfee">¥{{ item.payFee }}</view>
                </view>
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item2">
              <view v-for="item in packageList2" :key="item.id" class="package-item package-item1" @click="selectPackage = item.id">
                <image v-if="item.id == selectPackage" class="circle" mode="scaleToFill" src="@/static/images/ic_choose_s.png"></image>
                <image v-else class="circle" mode="scaleToFill" src="@/static/images/ic_choose_n.png"></image>
                <view class="package2">
                  <view class="name"> {{ item.name }}</view>

                  <view class="money">{{ item.content }}</view>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </block>
    <view class="btn" v-if="!isLoading" @click="toOrder">确认</view>
    <view class="grid"></view>
  </view>
</template>

<script setup>
import { UserApi } from "@/api";
import { postPackageFlag, postPackagePage, postBuyPackage } from "@/api/user";
import { useLoading } from "@/hooks";
import { pxToRpx } from "@/utils";
const { showLoading, hideLoading } = useLoading();
const vue3This = getCurrentInstance().proxy;
const changeTab = (item) => {
  console.log("item--", item);
  type.value = item.index;
};

const changeSwiper = (e) => {
  console.log("eeeeeeee", e);
  type.value = e.detail.current;
};

const isLoading = ref(true);
const hasPackage = ref(true);
const type = ref(0);
const typeList = ref([
  {
    type: 1,
    id: 1,
    name: "单次购买",
  },
  {
    type: 2,
    id: 2,
    name: "次卡购买",
  },
]);

const packageList1 = ref([
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
]);
const packageList2 = ref([
  // {
  //   id: 1,
  //   name: "多次",
  //   time: 7,
  //   content: "多次内容",
  // },
]);
const selectPackage = ref("");
const deviceNo = ref("");
onLoad((options) => {
  //   showLoading();
  isLoading.value = true;
  if (options.scene) {
    let scene = decodeURIComponent(options.scene);
    console.log("scene", scene);
    deviceNo.value = scene.split("=")[1];
    console.log(" deviceNo.value", deviceNo.value);
    // 后续处理scene
  } else {
    deviceNo.value = options.id;
  }
  console.log('deviceNo.value--', deviceNo.value);

  UserApi.postPackageFlag({
    deviceNo: deviceNo.value,
  })
    .then(async (res) => {
      console.log("res", res);
      hasPackage.value = res.remainCardFlag;
      if (hasPackage.value) {
        hideLoading();
        isLoading.value = false;
        uni.redirectTo({
          url: `/pagesCommon/package/list?deviceNo=${deviceNo.value}`,
        });
      } else {
        try {
          const res1 = await UserApi.postPackagePage({
            current: 1,
            size: 100,
            type: 0,
          });
          const res2 = await UserApi.postPackagePage({
            current: 1,
            size: 100,
            type: 1,
          });
          hideLoading();
          isLoading.value = false;
          packageList1.value = res1.records;
          packageList2.value = res2.records;
          computedSwiper();
        } catch (err) {
          console.log("err-", err);
        }
      }
    })
    .catch((error) => {
      // debugger
      console.log('error', error);
      computedSwiper();
      hideLoading();
      isLoading.value = false;
      if (error.code == 1) {
        setTimeout(() => {
          wx.switchTab({
            url:'/pages/home/index'
          });
        }, 2000)
      }
    });
});

const swiperHei = ref();
// onReady(async () => {
//   console.log("vue3This--", vue3This);
//   await nextTick();
//   vue3This.$uGetRect(".swiper-item1").then((rect1) => {
//     console.log("rect1---", rect1);

//     // 修复IOS safearea bottom 未填充高度
//     // swiperHei.value = pxToRpx(height);

//     vue3This.$uGetRect(".swiper-item2").then((rect2) => {
//       console.log("rect2---", rect2);

//       // 修复IOS safearea bottom 未填充高度
//       // swiperHei.value = pxToRpx(height);

//       swiperHei.value = pxToRpx(Math.max(rect1.height, rect2.height));
//       console.log("swiperHei.value--", swiperHei.value);
//     });
//   });
// });

const computedSwiper = async () => {
  console.log("vue3This--", vue3This);
  await nextTick();
  vue3This.$uGetRect(".swiper-item1").then((rect1) => {
    console.log("rect1---", rect1);

    // 修复IOS safearea bottom 未填充高度
    // swiperHei.value = pxToRpx(height);

    vue3This.$uGetRect(".swiper-item2").then((rect2) => {
      console.log("rect2---", rect2);

      // 修复IOS safearea bottom 未填充高度
      // swiperHei.value = pxToRpx(height);

      swiperHei.value = pxToRpx(Math.max(rect1.height, rect2.height));
      console.log("swiperHei.value--", swiperHei.value);
    });
  });
};
const isClick = ref(false);
const toOrder = async () => {
  if (isClick.value) {
    return;
  }
  isClick.value = true;
  showLoading();
  if (!selectPackage.value) {
    uni.showToast({
      icon: "none",
      title: "请选择套餐",
    });
    return;
  }
  const payResult = await UserApi.postBuyPackage({
    cardPackageId: selectPackage.value,
  });
  hideLoading();
  setTimeout(() => {
    isClick.value = false;
    console.log("2s延迟后触发");
  }, 2000);
  wx.requestPayment({
    timeStamp: payResult.timeStamp.toString(),
    nonceStr: payResult.nonceStr,
    package: payResult.packageValue,
    signType: payResult.signType,
    paySign: payResult.paySign,
    success(res) {
      uni.navigateTo({
        url: `/pagesCommon/package/complete?type=${type.value}&deviceNo=${deviceNo.value}`,
      });
    },
    fail(res) {
      console.info(res);
      console.info("支付失败");
    },
    complete() { },
  });
};
</script>

<style lang="scss" scoped>
.view-content {
  // height: 100vh;
  // overflow: hidden;
}
.head-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 30rpx;
  color: #6f6f6f;
  //   line-height: 42rpx;
  padding: 32rpx 136rpx 0;

  > view {
    padding-bottom: 4rpx;
  }

  .active {
    color: #27ab9c;
    position: relative;
    padding-bottom: 4rpx;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateY(100%);
      background: #27ab9c;
      width: 100%;
      height: 10rpx;
    }
  }
}

.title {
  margin-left: 24rpx;
  font-weight: 600;
  font-size: 30rpx;
  color: #232323;
  line-height: 42rpx;
  margin-bottom: 32rpx;
  margin-top: 34rpx;
}

.package-item {
  //   height: 160rpx;
  background: linear-gradient(57deg, #21a3bd 0%, #27ab9c 100%);
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(142, 142, 142, 0.5);
  border-radius: 12rpx;
  margin: 0 24rpx 24rpx;
  display: flex;
  padding: 24rpx;
  align-items: center;
  color: #fff;
  height: 160rpx;

  .circle {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    // border: 4rpx solid #fff;
    // .img {
    //   width: 40rpx;
    //   height: 40rpx;
    // }
  }

  .ri-box {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;

    > view {
      flex: none;

      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child {
        flex: 1;
        text-align: center;
        font-size: 21px;
        position: relative;
        margin-left: 20rpx;
        // letter-spacing: 12rpx;
        justify-content: flex-start;
        // &::after {
        //   content: "";
        //   position: absolute;
        //   top: 10px;
        //   bottom: 10px;
        //   right: 0;
        //   width: 1px;
        //   background: #fff;
        // }
      }

      .name {
        font-size: 44rpx;
      }

      &:last-child {
        margin-left: 20rpx;
      }
    }

    .content {
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;
    }

    .payfee {
      font-size: 36rpx;
      color: #d21515;
      line-height: 50rpx;
      text-shadow: 0px 4px 8px rgba(143, 143, 143, 0.5);
      margin-right: 8rpx;
    }

    .remaining-time {
      height: 48rpx;
      background: rgba(255, 255, 255, 0.44);
      border-radius: 8rpx;
      // padding: 6rpx 24rpx;
      font-weight: 600;
      color: #27ab9c;
      align-self: flex-start;
      margin-top: 6rpx;

      font-size: 24rpx;
      color: #009080;
      padding: 0rpx 14rpx;
      color: #009688;
      line-height: 20px;
      height: 40rpx;
    }
  }

  .info-box {
    display: flex;
    flex-direction: column;
    // align-items: center;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 260rpx;
  }

  .time {
    font-size: 28rpx;
    color: #ffffff;
    line-height: 40rpx;
    margin-bottom: 24rpx;
  }
}

.package-item1 {
  .package2 {
    margin-left: 32rpx;

    .name {
      font-weight: 600;
      font-size: 44rpx;
      color: #ffffff;
      line-height: 60rpx;
      margin-bottom: 12rpx;
    }

    .money {
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;
    }

    .count {
      color: #ff0000;
    }
  }
}

.package-list {
  flex: 1;
  overflow: auto;
  min-height: 500rpx;
}

.btn {
  width: 630rpx;
  //   margin: 0 auto;
  background: #27ab9c;
  height: 88rpx;
  margin: 48rpx auto;
  font-weight: 600;
  font-size: 36rpx;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
}

.package-list1 {
  .package2 {
    flex: 1;
    margin-right: 16rpx;
  }

  .remaining-time {
    height: 48rpx;
    background: rgba(255, 255, 255, 0.84);
    border-radius: 8rpx;
    padding: 6rpx 24rpx;
    font-weight: 600;
    font-size: 26rpx;
    color: #27ab9c;
    align-self: flex-start;
    margin-top: 6rpx;
  }
}
</style>
